<div class="da-list-wrap">
  <div class="da-content-banner">
    <d-breadcrumb>
      <d-breadcrumb-item><a routerLink="/">{{ 'product.breadcrumb.home' | translate }}</a></d-breadcrumb-item>
      <d-breadcrumb-item>销售台账</d-breadcrumb-item>
    </d-breadcrumb>
  </div>
  <div class="da-content-wrapper">
        <div class="da-list-container">
          <div class="da-list-header">
                <div class="d-input">
                  <div class="inputIn">
                    <input dTextInput style="width: 180px;" [error]="false" placeholder="订单号" class="me-2" [(ngModel)]="orderNo">
                    <input dTextInput style="width: 180px;" [error]="false" placeholder="收款单号" class="me-2" [(ngModel)]="receiptNo">
                    <input dTextInput style="width: 180px;" [error]="false" placeholder="客户" class="me-2" [(ngModel)]="customerName">
                  </div>
                  <div class="d-submit">
                    <d-button id="primaryBtn" (click)="search()"><i class="icon icon-filter-o me-2"></i>查询</d-button>
                    <d-button bsStyle="common" (click)="reset()"> <i class="icon icon-refresh me-2"></i>重置</d-button>
                  </div>
                </div>

          </div>
          <div class="list-content">
            <d-data-table [dataSource]="filteredData" [lazy]="true" [scrollable]="true" [fixHeader]="true" [tableWidthConfig]="tableWidthConfig"  [tableOverflowType]="'auto'" [resizeable]="true">
              <thead dTableHead>
                <tr dTableRow>
                  <th dHeadCell [fixedLeft]="'0px'">
                    <span>操作</span>
                  </th>
                  <th dHeadCell>
                    <span>打印</span>
                  </th>
                  <th dHeadCell *ngFor="let colOption of dataTableOptions.columns" [title]="colOption.header">{{colOption.header}}</th>
                </tr>
              </thead>
              <tbody dTableBody>
                <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex" let-nestedIndex="nestedIndex">
                  <tr dTableRow class="order-row" (click)="toggleRowItem(rowItem)">
                    <!-- 1 操作（展开/收起箭头） -->
                    <td dTableCell class="" [rowItem]="rowItem">
                      <span class="chevron "><span class="icon icon-chevron-right" [class.rotated]="rowItem.display"></span></span>
                    </td>
                    <!-- 2 打印 -->
                    <td dTableCell>
                      <a class="devui-link" (click)="printOrderRow(rowItem, $event)"><i class="icon icon-print me-1"></i>打印</a>
                    </td>
                    <!-- 2 单号 -->
                    <td dTableCell [rowItem]="rowItem"><span class="row-type type-order">订单</span><span class="ml8">{{rowItem.saleOrderNum}}</span></td>
                    <!-- 3 客户 -->
                    <td dTableCell [rowItem]="rowItem">{{rowItem.customerName}}</td>
                    <!-- 4 客户简称 -->
                    <td dTableCell [rowItem]="rowItem">{{rowItem.customerShortName}}</td>
                    <!-- 5 下单日期 -->
                    <td dTableCell [rowItem]="rowItem">{{rowItem.orderDate}}</td>
                    <!-- 6 交货日期 -->
                    <td dTableCell [rowItem]="rowItem">{{rowItem.deliveryDate}}</td>
                    <!-- 7 订单金额 -->
                    <td dTableCell [rowItem]="rowItem">{{rowItem.totalAmountWithTax | number:'1.0-0'}}</td>
                    <!-- 8 应收金额 -->
                    <td dTableCell [rowItem]="rowItem">{{rowItem.receivableAmount | number:'1.0-0'}}</td>
                    <!-- 9 实收金额 -->
                    <td dTableCell [rowItem]="rowItem">{{rowItem.receivedAmount | number:'1.0-0'}}</td>
                    <!-- 10 未收金额 -->
                    <td dTableCell [rowItem]="rowItem">{{rowItem.unpaidAmount | number:'1.0-0'}}</td>
                    <!-- 11 状态 -->
                    <td dTableCell [rowItem]="rowItem"><d-badge [showDot]="true" [status]="rowItem.status==='审核通过' ? 'success' : 'warning'"></d-badge> <span class="status-text">{{rowItem.status}}</span></td>
                  </tr>
                  <ng-container *ngIf="rowItem.display">
                    <tr *ngFor="let item of rowItem.payments; let index = index;" class="payment-row">
                      <!-- 1 操作（收款单标签） -->
                      <td dTableCell [rowItem]="item"><span class="devui-link me-2" (click)="detail()">收款单</span></td>
                      <!-- 2 打印 -->
                      <td dTableCell>
                        <a class="devui-link" (click)="printPaymentRow(item, rowItem, $event)"><i class="icon icon-print me-1"></i>打印</a>
                      </td>
                      <!-- 2 单号（收款单号） -->
                      <td dTableCell [rowItem]="item"><span class="row-type type-payment">收款</span><span class="ml8" dTooltip [content]="(item.remark || '') + ' ' + item.paymentNum"><i class="icon icon-receipt"></i> {{item.paymentNum}}</span></td>
                      <!-- 3 客户 -->
                      <td dTableCell>{{rowItem.customerName}}</td>
                      <!-- 4 客户简称 -->
                      <td dTableCell>{{rowItem.customerShortName}}</td>
                      <!-- 5 下单日期（用收款日期替代） -->
                      <td dTableCell>{{item.paymentDate | date:'yyyy-MM-dd HH:mm'}}</td>
                      <!-- 6 交货日期（沿用订单） -->
                      <td dTableCell>{{rowItem.deliveryDate}}</td>
                      <!-- 7 订单金额（沿用订单含税金额） -->
                      <td dTableCell>{{rowItem.totalAmountWithTax | number:'1.0-0'}}</td>
                      <!-- 8 应收金额（沿用订单应收） -->
                      <td dTableCell>{{rowItem.receivableAmount | number:'1.0-0'}}</td>
                      <!-- 9 实收金额（本笔） -->
                      <td dTableCell>{{item.actualAmount | number:'1.0-0'}}</td>
                      <!-- 10 未收金额（到本笔后的剩余） -->
                      <td dTableCell>{{remainingAfter(rowItem, index) | number:'1.0-0'}}</td>
                      <!-- 11 状态 -->
                      <td dTableCell><d-badge [showDot]="true" [status]="item.isConfirmed ? 'success' : 'warning'"></d-badge> <span class="status-text">{{item.status}}</span></td>
                    </tr>
                    <tr class="summary-row" [class.completed]="groupCompleted(rowItem)">
                      <td dTableCell [fixedLeft]="'0px'"><strong>汇总</strong></td>
                      <td dTableCell></td>
                      <td dTableCell [attr.colspan]="10">
                        收款笔数：<b>{{rowItem.payments?.length || 0}}</b>
                        ｜ 收款金额：<b>{{sumPaymentActual(rowItem.payments) | number:'1.0-0'}}</b>
                        ｜ 剩余金额：<b>{{groupRemaining(rowItem) | number:'1.0-0'}}</b>
                        ｜ 完成：
                        <b>
                          <span *ngIf="groupCompleted(rowItem); else notDone">已完成</span>
                          <ng-template #notDone>未完成</ng-template>
                        </b>
                      </td>
                    </tr>
                  </ng-container>
                </ng-template>
              </tbody>
            </d-data-table>
          </div>
          <div class="page-footer">
            <div>
              <p>共 <span class="underline">{{pager.total}}</span> 条</p>
            </div>
            <d-pagination
            [size]="'sm'"
            [canViewTotal]="true"
            [canChangePageSize]="true"
            [canJumpPage]="true"
            [maxItems]="5"
            [total]="pager.total"
            [pageSizeOptions]="pageSizeOptions"
            [(pageSize)]="pager.pageSize"
            [(pageIndex)]="pager.pageIndex"
            (pageIndexChange)="pageIndexChange($event)"
            (pageSizeChange)="pageSizeChange($event)"
            >
            </d-pagination>
          </div>
        </div>
  </div>
</div>


